<template>
  <div class="RankingInverterbox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="光伏系统">
                  <FilterSelect2
                      v-model="companyId"
                      :optionlist="xitonglist"
                      @updateModelValue="changexitong"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="display:flex;margin-top: 4px;">
                <el-radio-group v-model="radio3" size="small" style="margin-right:20px ;">
                  <el-radio-button label="1">日</el-radio-button>
                  <el-radio-button label="2">月</el-radio-button>
                  <el-radio-button label="3">年</el-radio-button>
                </el-radio-group>
                <el-date-picker style="flex:1;" v-if="radio3=='1'" v-model="value1" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small"></el-date-picker>
                <el-date-picker style="flex:1;" v-if="radio3=='2'" v-model="value2" type="month" value-format="yyyy-MM" placeholder="选择月" size="small"></el-date-picker>
                <el-date-picker style="flex:1;" v-if="radio3=='3'" v-model="value3" type="year" value-format="yyyy" placeholder="选择年" size="small"></el-date-picker>
              </el-col>
              <el-col :span="13" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button size="small" type="primary" @click="gettablelist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="title">
        <div>
          <el-radio-group v-model="type" size="small" @change="changetype">
            <el-radio-button label="1">发电量</el-radio-button>
            <el-radio-button label="2">最大功率</el-radio-button>
            <el-radio-button label="3">PR值</el-radio-button>
          </el-radio-group>
        </div>
        <div><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
      </div>
      <div class="echandtab">
        <div class="tongbiech" ref="tongbiech"></div>
        <div class="tongbiech" >
          <TableColumn
            ref="tabledata"
            :tableData="tableData" 
            :tableConfig="tableConfigs" 
            :issize="issize">
          </TableColumn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {libianpaimingquxianapi,libianpaimingtableapi} from '@/api/Photovoltaic/analysis/RankingInverter'
import {getphotovollistapi} from '@/api/Photovoltaic/analysis/YoyAnalysis'
import * as echarts from 'echarts';
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
export default {
  name: 'CallPoliceRankingInverter',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      type:'1',
      loading: false,
      issize: 'medium',
      value1: '',
      value2: '',
      value3:'',
      radio3:'1',
      companyId:'',
      xitonglist: [],
      tableData: [],
      tableConfigs: [
      { label: '序号', type: 'index', center: 'center', width: '70' },
        { label: '逆变器', prop: 'name' ,},
        { label: '发电量(kWh)', prop: 'quantity', center: 'right'  },
        { label: '发电量排名', prop: 'quantityRank', center: 'right'  },
        { label: '最大功率(kW)', prop: 'power', center: 'right'},
        { label: '功率排名', prop: 'powerRank',center: 'right' },
        { label: 'PR值', prop: 'prValue', center: 'right' },
        { label: 'PR值排名', prop: 'prValueRank', center: 'right' },
      ],
      echartlist:[]
    };
  },

  async mounted() {
    this.gettime()
    const { data: { list } } = await getphotovollistapi()
    this.xitonglist = list
    const PhotoCompanyId = localStorage.getItem('PhotoCompanyId')
    this.$set(this, 'companyId', PhotoCompanyId ? +PhotoCompanyId : list[0].id)
    this.gettablelist()
  },

  methods: {
    // 查询按钮
    async gettablelist() {
      // 获取排名图表
      const {data:{list}} = await libianpaimingquxianapi({
        dateString: this.radio3 == '1' ? this.value1 : this.radio3 == '2' ? this.value2 : this.value3,
        dateType:this.radio3,classId: this.companyId, 
      })
      this.echartlist = list
      this.changetype(this.type)
      // 获取排名表格数据
      this.$refs.tabledata.loading=true
      const res=await libianpaimingtableapi({
        dateString: this.radio3 == '1' ? this.value1 : this.radio3 == '2' ? this.value2 : this.value3,
        dateType:this.radio3,classId: this.companyId, 
      })
      this.tableData=res.data.list
      this.$refs.tabledata.loading=false
    },
    // 单选框切换
    async changetype(val) {
      const list = this.echartlist.map(ele => {
        return val=='1'?ele.quantity:val=='2'?ele.power:ele.prValue
      })
      const timePoints=this.echartlist.map(ele=>ele.name)
      this.gettongbiechart(list,timePoints)
    },
    // 系统下拉存本地
    changexitong(val) {
      localStorage.setItem('PhotoCompanyId', val)
    },
    // 获取图表
    gettongbiechart(list,timePoints) {
      var chartDom = this.$refs.tongbiech
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      var dataWithTimePoints = timePoints.map((item, index) => ({ time: item, value: list[index] }));
      dataWithTimePoints.sort((a, b) => a.value - b.value);

      // 获取排序后的x坐标轴数据和y轴数据
      var sortedTimePoints = dataWithTimePoints.map(item => item.time);
      var sortedList = dataWithTimePoints.map(item => item.value);
      option = {
        color:['#5087ec'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          // inverse:true,
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: sortedTimePoints
        },
        series: [
          {
            name: this.type=='1'?'发电量':this.type=='2'?'最大功率':'PR值',
            type: 'bar',
            data: sortedList,
            label: {
                  show: true,
                  position: 'right',
                  textStyle: {
                      color: '#5087ec' // 设置数值的颜色为红色
                  }
              }
          }
        ]
      }

      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
    // 重置
    chongzhi() {
      this.radio3 = '1'
      this.gettime()
      const PhotoCompanyId = localStorage.getItem('PhotoCompanyId')
      this.$set(this, 'companyId', PhotoCompanyId ? +PhotoCompanyId : this.xitonglist[0].id)
      this.gettablelist()
    },
     // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('pes-microservice-biz/pvm/inverter/rankings/data/exportExcel',{
        dateString: this.radio3 == '1' ? this.value1 : this.radio3 == '2' ? this.value2 : this.value3,
        dateType:this.radio3,classId: this.companyId,
      },'逆变器排名')
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.$set(this,'value1',year+'-'+month+'-'+day)
      this.$set(this,'value2',year+'-'+month)
      this.$set(this,'value3',year.toString())
    },
  },
};
</script>

<style scoped>
.RankingInverterbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    background-color: #fff;
    padding:  20px;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .title{
      margin-bottom: 10px;
      display:flex;
      justify-content:space-between;
    }
    .echandtab{
      height: 95%;
      .tongbiech{
        height: 50%;
      }
    }
  }
}
</style>